iT邦幫忙

2024 iThome 鐵人賽

DAY 16
1
Mobile Development

用最接近自然語言的Basic30天學會行動App系列 第 16

Basic30天學會行動App-第16章.實作天氣預報App

  • 分享至 

  • xImage
  •  

第16章: 實作天氣預報App

天氣預報是許多行動應用程式中的一個常見功能。通過獲取氣象資料並將其顯示在應用程式的使用者介面上,你可以為使用者提供及時的天氣資訊。在本章中,我們將探討如何使用 B4A 來實作一個基本的天氣預報 App,涵蓋資料的取得、解析和顯示,以及如何處理網路錯誤。

取得氣象資料

要構建天氣預報 App,第一步是從一個可信賴的氣象 API 獲取天氣資料。OpenWeatherMap 是一個廣泛使用的氣象服務平台,提供免費的 API 來獲取全球各地的天氣資料。

  1. 註冊並獲取API密鑰
    在使用 OpenWeatherMap API 之前,你需要在該平台上註冊一個帳號,並獲取一個 API 密鑰。這個密鑰將用於每次發送請求時進行認證。
  2. 發送天氣請求
    使用 HttpJob 類別,我們可以輕鬆地發送 GET 請求來獲取天氣資料。
Sub GetWeather(city As String)
    Dim job As HttpJob
    job.Initialize("WeatherJob", Me)
    job.Download("https://api.openweathermap.org/data/2.5/weather?q=" & city & "&appid=YOUR_API_KEY")
    ```
End Sub
在這個範例中,我們向 OpenWeatherMap 伺服器發送了一個請求,請求的 URL 中包含城市名稱和 API 密鑰。伺服器將返回該城市的當前天氣資料。
## 解析並顯示數據
取得氣象資料後,下一步是解析回應並將資料顯示在應用程式中。
1. 解析JSON資料
伺服器返回的天氣資料通常是 JSON 格式。我們可以使用 JSONParser 來解析這些資料。

Sub ParseWeatherData(json As String)
Dim parser As JSONParser
parser.Initialize(json)
Dim root As Map = parser.NextObject
Dim main As Map = root.Get("main")
Dim temperature As Double = main.Get("temp")
Dim weather As List = root.Get("weather")
Dim weatherMap As Map = weather.Get(0)
Dim description As String = weatherMap.Get("description")

Log("Temperature: " & temperature)
Log("Weather: " & description)

End Sub

在這個範例中,我們解析了 JSON 資料,從中提取出當前溫度和天氣描述。這些資訊可以直接顯示在應用程式的使用者介面上。
2. 顯示天氣資料
將解析後的資料顯示在介面上,我們可以使用 Label 或 TextView 控件來更新文字內容。

Sub UpdateUI(temperature As Double, description As String)
lblTemperature.Text = "溫度: " & temperature & "°C"
lblWeatherDescription.Text = "天氣: " & description
End Sub

這樣一來,當使用者查詢某個城市的天氣時,應用程式會即時更新 UI,顯示最新的天氣資訊。
## 管理網路錯誤
在進行網路操作時,處理可能的錯誤情境非常重要。這些錯誤可能包括網路連接失敗、伺服器不可用或 API 請求超時等。
1. 處理HTTP錯誤碼
當伺服器返回一個錯誤碼(如 404 或 500)時,應用程式應該給出相應的提示或處理措施。

Sub JobDone (Job As HttpJob)
If Job.Success Then
ParseWeatherData(Job.GetString)
Else
HandleNetworkError(Job)
End If
Job.Release
End Sub

Sub HandleNetworkError(Job As HttpJob)
Log("Error: " & Job.ErrorMessage)
lblError.Text = "無法取得天氣資料,請稍後再試。"
End Sub

這裡,我們在 JobDone 方法中檢查請求是否成功,如果失敗則調用 HandleNetworkError 來處理錯誤,並在 UI 上提示使用者。
2. 設計重試機制
為了提升使用者體驗,你可以實作一個重試機制,當初次請求失敗時,應用程式會自動重新發送請求。

Sub RetryRequest(city As String)
Dim attempts As Int = 0
Do While attempts < 3
GetWeather(city)
attempts = attempts + 1
If Job.Success Then Exit
Loop

If Not(Job.Success) Then
    lblError.Text = "多次嘗試後依然無法取得天氣資料。"
End If

End Sub

在這個範例中,我們設定了最多三次重試的機會,如果依然失敗,則顯示錯誤訊息。
範例程式:完整的天氣預報App
以下是一個完整的範例,展示如何從頭到尾構建一個天氣預報 App,包括資料獲取、解析、顯示和錯誤處理。

Sub Process_Globals
' 全域變數
End Sub

Sub Globals
Dim lblTemperature As Label
Dim lblWeatherDescription As Label
Dim lblError As Label
Dim btnFetchWeather As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("MainLayout")

btnFetchWeather.Initialize("btnFetchWeather")
btnFetchWeather.Text = "查詢天氣"
Activity.AddView(btnFetchWeather, 50, 50, 200, 50)

lblTemperature.Initialize("")
lblWeatherDescription.Initialize("")
lblError.Initialize("")

Activity.AddView(lblTemperature, 50, 150, 300, 50)
Activity.AddView(lblWeatherDescription, 50, 200, 300, 50)
Activity.AddView(lblError, 50, 250, 300, 50)

End Sub

Sub btnFetchWeather_Click
' 查詢某城市的天氣
GetWeather("Taipei")
End Sub

Sub GetWeather(city As String)
Dim job As HttpJob
job.Initialize("WeatherJob", Me)
job.Download("https://api.openweathermap.org/data/2.5/weather?q=" & city & "&appid=YOUR_API_KEY")
End Sub

Sub JobDone (Job As HttpJob)
If Job.Success Then
ParseWeatherData(Job.GetString)
Else
HandleNetworkError(Job)
End If
Job.Release
End Sub

Sub ParseWeatherData(json As String)
Dim parser As JSONParser
parser.Initialize(json)
Dim root As Map = parser.NextObject
Dim main As Map = root.Get("main")
Dim temperature As Double = main.Get("temp")
Dim weather As List = root.Get("weather")
Dim weatherMap As Map = weather.Get(0)
Dim description As String = weatherMap.Get("description")

UpdateUI(temperature, description)

End Sub

Sub UpdateUI(temperature As Double, description As String)
lblTemperature.Text = "溫度: " & temperature & "°C"
lblWeatherDescription.Text = "天氣: " & description
lblError.Text = "" ' 清空錯誤訊息
End Sub

Sub HandleNetworkError(Job As HttpJob)
Log("Error: " & Job.ErrorMessage)
lblError.Text = "無法取得天氣資料,請稍後再試。"
End Sub

> 結論
通過這個章節,你學會了如何構建一個基本的天氣預報 App,包括如何獲取氣象資料、解析 JSON 資料、更新 UI 以及處理網路錯誤。這些技術是開發網路驅動型應用程式的基礎,掌握後你可以進一步擴展功能,例如加入多城市支援、天氣預報功能或是天氣圖標顯示等。隨著你的技能提升,你將能夠構建更複雜且功能豐富的行動應用程式。

參考網址
參考網址
https://www.b4x.com/
https://www.b4x.com/android/forum/threads/b4xcopilot-a-i-assistant.161801/

上一篇
Basic30天學會行動App-第15章.學習網路服務連接
下一篇
Basic30天學會行動App-第17章.學習處理圖片與多媒體
系列文
用最接近自然語言的Basic30天學會行動App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言